<script setup lang="ts">
import { defineProps, ref, watch } from "vue"
import { FormInst, UploadFileInfo, NModal, NForm, NFormItem, NInput, NUpload } from "naive-ui"
import { getOssApi } from "@api/index"

const props = defineProps<{
  showModal: boolean
  modalSubmit: (data: any) => void
  modalClose: () => void
  handleUpdateCate: (data: any) => void
  editConfig: any
}>()

const formRef = ref<FormInst | null>(null)
const ossConfig: any = ref({})
const fileList = ref<UploadFileInfo[]>([])
const formValue = ref({
  cateUrl: "",
  cateName: "",
})
const rules = {
  cateUrl: {
    required: true,
    message: "请上传图片",
    trigger: "blur",
  },
  cateName: {
    required: true,
    message: "请输入分类名称",
    trigger: ["input", "blur"],
  },
}
//弹窗确认
const modalOnOk = () => {
  formRef.value?.validate(errors => {
    if (!errors) {
      if (props.editConfig.isEdit) {
        props.handleUpdateCate({ cateId: props.editConfig.echoData.cateId, ...formValue.value })
        formValue.value = {
          cateUrl: "",
          cateName: "",
        }
      } else {
        props.modalSubmit(formValue.value)
        formValue.value = {
          cateUrl: "",
          cateName: "",
        }
      }
    } else {
      console.log(errors)
      formValue.value = {
        cateUrl: "",
        cateName: "",
      }
    }
  })
  fileList.value = []
}
//弹窗关闭
const modalCancel = () => {
  props.modalClose()
  formValue.value = {
    cateUrl: "",
    cateName: "",
  }
  fileList.value = []
}
//上传图片前回调
const beforeUpload = async (file: any) => {
  file.file.name = Date.now().toString() + '.' + file.file.type.slice(6)
  ossConfig.value = await getOssApi({})
}
//上传图片时携带的数据
const dataReturn = (file: any) => {
  return {
    key: ossConfig.value.data.dir + file.file.name,
    OSSAccessKeyId: ossConfig.value.data.accessid,
    ...ossConfig.value.data,
    success_action_status: "200",
  }
}
//上传完成回调
const uploadFinish = (file: any) => {
  if (file.file.status === "finished") {
    formValue.value.cateUrl = `${ossConfig.value.data.host}/${ossConfig.value.data.dir}${file.file.name}`
  }
}
//编辑分类的监听回调
watch(
  () => props.editConfig,
  (newValue, oldValue) => {
    if (newValue.isEdit === true) {
      formValue.value = {
        cateName: newValue.echoData?.cateName,
        cateUrl: newValue.echoData?.cateUrl,
      }
      fileList.value = [
        {
          id: newValue.echoData?.cateId,
          name: newValue.echoData?.cateName,
          status: "finished",
          url: newValue.echoData?.cateUrl,
        },
      ]
    }
  },
  {
    deep: true,
  }
)
</script>

<template>
  <div class="modal">
    <n-modal :show="props.showModal" preset="dialog" :title="props.editConfig.isEdit ? '编辑分类' : '新增分类'" positive-text="确认"
      negative-text="取消" @positive-click="modalOnOk" @negative-click="modalCancel" :show-icon="false"
      :on-close="modalCancel" :on-mask-click="modalCancel">
      <n-form ref="formRef" label-placement="left" :model="formValue" :rules="rules">
        <n-form-item label="图片:" path="cateUrl">
          <n-upload :max="1" accept=".png,.jpg" :action="ossConfig?.data?.host" list-type="image-card"
            v-model:value="formValue.cateUrl" :on-before-upload="beforeUpload" :data="dataReturn"
            :on-finish="uploadFinish" :default-file-list="fileList" />
        </n-form-item>
        <n-form-item label="分类名称:" path="cateName">
          <n-input class="form_item" v-model:value="formValue.cateName" placeholder="请填写分类名称" />
        </n-form-item>
      </n-form>
    </n-modal>
  </div>
</template>

<style lang="scss" scoped>
.form_item {
  width: 180px;
}
</style>
